<!-- 支出 -->
<template>
  <!-- 支出指标   -->
  <div class="ctn-box ctn-box-1">
    <div class="ctn-box-title">
      <span>{{params?.monthParams}}月人员支出</span>
      <div class="title-tab">
        <span :class="{'active': !tagActive}" @click.stop="tagActive = !tagActive;getData()">月</span>
        <span :class="{'active': tagActive}" @click.stop="tagActive = !tagActive;getData()">年</span>
      </div>
    </div>
    <div class="ctn-box-base">
      <div class="pie-echarts">
        <basic-echarts-pie
            :chartData="chartDataBox"
        ></basic-echarts-pie>
      </div>
      <div class="ctn-box-1-table">
        <div class="tr table-head">
          <span class="ps1">名称</span>
          <span>金额</span>
          <span>占比</span>
          <span>较上月</span>
        </div>
        <div class="table-body">
          <vue3-seamless-scroll
              ref="mtScroll"
              :list="expensesList"
              :limit-scroll-num="8"
              :hover-stop="true"
          >
            <div class="tr" v-for="ml in expensesList">
              <span class="ps1">{{ml?.name}}</span>
              <span class="ps-y">{{ml?.amountThis}}</span>
              <span class="ps-y">{{ml?.caleThis}}%</span>
              <span class="ps-y ps-up">{{ml?.caleLast}}%</span>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import BasicEchartsPie from "@/components/basicEchartsPie.vue";
import {IBase} from "@/api/interface/base";
import {getUserExpensesMonthApi, getUserExpensesYearApi} from "@/api/modules/base";
import {caleData} from "@/utils/baseCfg";

defineOptions({
  name: 'expensiveView'
})
// 支出
let expensesList = ref([])
// 饼图
let chartDataBox: any = ref([]);
// false: 月；true： 年
const tagActive = ref<boolean>(false)
const params = defineProps({
  monthParams: {
    type: String,
    default: ''
  }
})

// 获取后端接口
const getData = async () => {
  chartDataBox.value = []
  expensesList.value = []
  const paramsP = reactive<IBase.Params>({
    month: parseInt(params.monthParams?.split('-')[1]),
    year: params.monthParams?.split('-')[0]
  })
  let dataInfo = null
  // 当前状态为年 的分类
  if (tagActive.value) {
    delete paramsP.month
    const {data} = await getUserExpensesYearApi(paramsP)
    dataInfo = data
  }else{
    const {data} = await getUserExpensesMonthApi(paramsP)
    dataInfo = data
  }
  const sumThisMonth = Object.values(dataInfo.thisMonthGroupZCTotal).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
  Object.keys(dataInfo.thisMonthGroupZCTotal).forEach(n =>{
    // 饼图
    chartDataBox.value.push({
      value: dataInfo.thisMonthGroupZCTotal[n],
      name: n,
    })
    let caleThisInfo,caleLastInfo
    sumThisMonth === 0 ? caleThisInfo = 0 : caleThisInfo = ((dataInfo.thisMonthGroupZCTotal[n] / sumThisMonth) * 100).toFixed(2)
    dataInfo.lastMonthGroupZCTotal[n] === 0 ? caleLastInfo = 0 : caleLastInfo = (((dataInfo.thisMonthGroupZCTotal[n] - dataInfo.lastMonthGroupZCTotal[n])/dataInfo.lastMonthGroupZCTotal[n]) * 100).toFixed(2)
    // 列表
    expensesList.value.push({
      name: n,
      amountThis: caleData(dataInfo.thisMonthGroupZCTotal[n]),
      caleThis: caleThisInfo,
      caleLast: caleLastInfo,
    })
  })
}
watch(()=>params.monthParams,()=>{
  tagActive.value = false
  getData()
})
onMounted(()=>{
  getData()
})
</script>

<style lang="scss" scoped>
.ctn-box-1{
  .ctn-box-base{
    padding: 13px;
    .pie-echarts{
      height: 254px;
    }
    .ctn-box-1-table{
      height: calc(100% - 254px);
      .tr .ps1{
        width: 36%;
      }
      .table-head{
        width: 100%;
        height: 32px;
        line-height: 32px;
        background: url("@/assets/icons/table-head-bg.png") center/100% 100% no-repeat;
      }
      .table-body{
        width: 100%;
        height: calc(100% - 32px);
        overflow: auto;
        background: url("@/assets/icons/table-body-bg-1.png") center/100% 100% no-repeat;
        .tr{
          height: 53px;
          line-height: 53px;
          color: rgba(190, 212, 244, 1);
          border-bottom: 1px solid rgba(5, 38, 90, 1);
        }
      }
    }
  }
}
</style>
